<!DOCTYPE html>
<html>
<head>
    <title>计分器</title>
    <style>
        input{
            width: 100%;
            height: 30px;
            border: none;
            border-bottom: 1px solid #ccc;
            outline: none;
            font-size: 18px;
            margin: 10px 0;
        }
        .start{
            cursor: pointer;
            width: 100px;
            height: 40px;
            background-color: rgb(53, 53, 231);
            color: #fff;
            border: none;
            border-radius: 5px;
            margin: 10px 0;
            font-size: 18px;
        }
    </style>
</head>

<body>
    <h2>欢迎使用斯诺克计分器</h2>
    <input type="text" id="player1" class="player" placeholder="请输入选手甲名字">
    <input type="text" id="player2" class="player" placeholder="请输入选手乙名字">
    <button id="start" class="start">开始</button>

    <script>
        document.getElementById('start').onclick = function(){
            localStorage.setItem("left-name", document.getElementById('player1').value);
            localStorage.setItem("right-name", document.getElementById('player2').value);
            window.location.href = './main_cx.html';
        }
    </script>
</body>
</html>